<nz-list [nzItemLayout]="'vertical'">
  @for (item of 8 | numberLoop; track $index) {
    <nz-list-item nzNoFlex>
      <nz-list-item-meta>
        <nz-list-item-meta-title>
          <a>Alipay</a>
        </nz-list-item-meta-title>
        <nz-list-item-meta-description>
          <nz-tag>Ant Design</nz-tag>
          <nz-tag>设计语言</nz-tag>
          <nz-tag>蚂蚁金服</nz-tag>
        </nz-list-item-meta-description>
      </nz-list-item-meta>
      段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
      ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
      <div class="m-t-15 info">
        <div nz-row>
          <nz-avatar class="m-r-8" [nzSize]="'small'" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
          <a class="operate-text">付小小</a>
          <span class="m-r-8">发布在</span>
          <a class="m-r-8 operate-text">https://ant.design</a>
          <time nz-typography nzType="secondary">2021-02-19 14:21</time>
        </div>
      </div>
      <ul nz-list-item-actions>
        <nz-list-item-action>
          <i class="m-r-8" nz-icon nzType="star"></i>
          156
        </nz-list-item-action>
        <nz-list-item-action>
          <i class="m-r-8" nz-icon nzType="like"></i>
          156
        </nz-list-item-action>
        <nz-list-item-action>
          <i class="m-r-8" nz-icon nzType="message"></i>
          2
        </nz-list-item-action>
      </ul>
    </nz-list-item>
  }
</nz-list>
